<template>
<!--    活动组件-->
    <div>
        <el-card class="box-card" v-for="(item, index) in list" :key="index" style="margin-bottom: 30px">
            <div style="display: flex;justify-content: space-between;align-items: center">
                <h4>{{item.title}}</h4>
                <div>
                    <el-button type="text" @click="join(item.title, item.activity_id)" v-if="item.isjoin">加入</el-button>
                </div>
            </div>
            <div style="margin-top: 10px">{{item.content}}</div>
            <div style="display: flex;justify-content: space-between;align-items: center">
                <div style="font-size: 13px">
                    <div style="margin-top: 10px">限{{item.people}}参加</div>
                    <div style="margin-top: 10px">类型：{{item.type}}</div>
                </div>
                <div style="font-size: 13px">
                    <div style="margin-top: 10px">报名结束时间：{{item.sign_up_end_time}}</div>
                    <div style="margin-top: 10px">活动结束时间：{{item.end_time}}</div>
                </div>
            </div>
            <div style="display: flex;justify-content: space-between;align-items: center">
                <div style="font-size: 12px;margin-top: 10px">专业：{{item.professional}}</div>
                <div style="font-size: 12px;margin-top: 10px">备注：{{item.note}}</div>
            </div>
        </el-card>
        <div style="text-align: center;margin-top: 20px;cursor: pointer" @click="more" v-show="ismore">加载更多</div>
<!--        报名框-->
        <el-drawer
                :title="title"
                :visible.sync="drawer"
                :direction="direction"
       >
            <div>
                <div style="margin-bottom: 10px;font-size: 13px">参加人的姓名：</div>
                <el-input
                        placeholder="请输入参加人的姓名"
                        prefix-icon="el-icon-user"
                        v-model="name"
                        style="margin-bottom: 20px"
                ></el-input>
                <div style="margin-bottom: 10px;font-size: 13px">电话号"：</div>
                <el-input
                        placeholder="请输入电话号"
                        prefix-icon="el-icon-phone-outline"
                        v-model="phone"
                        style="margin-bottom: 20px"
                ></el-input>
                <div style="margin-bottom: 10px;font-size: 13px">专业：</div>
                <el-input
                        placeholder="请输入专业"
                        prefix-icon="el-icon-suitcase-1"
                        v-model="professional"
                        style="margin-bottom: 20px"
                ></el-input>
                <div style="margin-bottom: 10px;font-size: 13px">参加的人数：</div>
                <el-input
                        placeholder="请输入参加的人数"
                        prefix-icon="el-icon-user"
                        v-model="sign_up_people"
                        style="margin-bottom: 20px"
                ></el-input>
                <el-button type="primary" @click="queding">确定</el-button>
            </div>
        </el-drawer>
    </div>
</template>

<script>
    import {getallactivity, joinactivity, getuseractivity} from '../api/api'
    export default {
        name: "activity",
        data(){
            return{
                n:1,
                list:[],
                ismore:true,
                drawer:false,
                direction:'rtl',
                title:'',
                name:'',
                phone:'',
                professional:'',
                sign_up_people:0,
                activity_id:0
            }
        },
        methods:{
            //加入
            join(title, activity_id){
                this.title = title
                this.drawer = true
                this.activity_id = activity_id
            },
            queding(){
                joinactivity(this.activity_id, this.name, this.phone, this.professional, Number(this.sign_up_people)).then(res=>{
                    if(res.status == 0){
                        // console.log(res)
                        if(res.status == 0){
                            this.drawer = false
                            this.$message({
                                showClose: true,
                                message: '参加成功',
                                type: 'success'
                            });
                            this.$router.go(0)
                        }
                    }
                })
            },
            get(n){
                getallactivity(n).then(res=>{
                    console.log(res)
                    if(res.status == 0){
                        if(res.data.length == 0){
                            this.ismore = false
                        }
                        let list1 = res.data
                        getuseractivity(n).then(a=>{
                            console.log(a)
                            if(a.status == 0 ){
                                list1.forEach(value=>{
                                    value.isjoin = true
                                    a.data.forEach(b=>{
                                        if (value.activity_id == b.activity_id){
                                            value.isjoin = false
                                            if(b.audit == 2){
                                                value.isjoin = true
                                            }
                                        }
                                    })
                                })
                                console.log(list1)
                                this.list = this.list.concat(list1)
                            }
                        })

                    }

                })
            },
            more(){
                this.n++
                this.get(this.n)
            }
        },
        created() {
            this.get(this.n)

        }
    }
</script>

<style scoped>
    /deep/.el-drawer__body {
        padding: 20px;
    }
</style>
